<template>
  <div class="container process-list">
      <div class="card">
          <div class="card-header"><i class="icon icon-history"></i>历史流程筛选</div>
          <div class="card-body">
              <div class="query-criteria clearfix">
                  <el-form :inline="true" :model="assetsSort" class="demo-form-inline f-left">
                      <div class="el-form-item el-form-item--small">
                          <label class="el-form-item__label">请选择</label>
                      </div>
                      <el-form-item>
                          <el-select v-model="assetsSort.secretLevel" placeholder="选择流程">
                              <el-option label="流程 A" value="a"></el-option>
                              <el-option label="流程 B" value="a"></el-option>
                              <el-option label="流程 B" value="beijing"></el-option>
                              <el-option label="流程 B" value="beijing"></el-option>
                              <el-option label="流程 B" value="beijing"></el-option>
                              <el-option label="流程 B" value="beijing"></el-option>
                              <el-option label="流程 B" value="beijing"></el-option>
                              <el-option label="流程 B" value="beijing"></el-option>
                              <el-option label="流程 B" value="beijing"></el-option>
                          </el-select>
                      </el-form-item>
                      <el-form-item>
                          <el-input v-model.trim="assetsSort.otherInfo" placeholder="姓名/电话"></el-input>
                      </el-form-item>
                      <el-form-item>
                          <el-button type="primary" @click="onSubmit">查询</el-button>
                      </el-form-item>
                  </el-form>
              </div>
          </div>
      </div>
      <div class="card">
          <div class="card-header">流程列表</div>
          <div class="card-body">
              <el-tabs v-model="activeName" @tab-click="tabClick">
                  <el-tab-pane label="待我审核的流程" name="first">
                      <el-table stripe :data="tableData1" style="width: 100%">
                          <el-table-column fixed prop="applyUserName" label="申请人" width="80">
                          </el-table-column>
                          <el-table-column fixed prop="applyTypeName" label="申请类型" width="80">
                          </el-table-column>
                          <el-table-column label="申请日期" width="180">
                              <template slot-scope="scope">
                                <span>{{scope.row.applyDate | formatTime}}</span>
                              </template>
                          </el-table-column>
                          <el-table-column prop="applyDepartmentName" label="申请部门">
                          </el-table-column>
                          <el-table-column prop="roomNum" label="房间号" width="120">
                          </el-table-column>
                          <el-table-column prop="mobile" label="工位电话" width="120">
                          </el-table-column>
                          <el-table-column label="申请事物" align="center">
                            <template slot-scope="scope">
                              <el-popover trigger="hover" placement="top">
                                  <p v-for="item in scope.row.thing" :key="item.index">{{ item }}</p>
                                  <div slot="reference" class="name-wrapper">
                                      <el-tag size="medium" :style="{textAlign: 'center'}">查看全部申领</el-tag>
                                  </div>
                              </el-popover>
                            </template>
                          </el-table-column>
                          <el-table-column prop="status" label="流程状态" width="120" align="center">
                              <template slot-scope="scope">
                                <span v-if="scope.row.status == '1' " class="color-warning">正在审批中</span>
                                <span v-if="scope.row.status == '2' " class="color-danger">流程被拒绝</span>
                                <span v-if="scope.row.status == '3'" class="olor-info">流程已过期</span>
                                <span v-if="scope.row.status ==='0'" class="color-success">已通过流程</span>
                              </template>
                          </el-table-column>
                          <el-table-column fixed="right" label="操作" width="100">
                              <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row,scope.row.applyTypeId)" type="text" size="small">查看流程</el-button>
                              </template>
                          </el-table-column>
                      </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="我发起的流程" name="second">
                      <el-table stripe :data="tableData2" style="width: 100%">
                          <el-table-column fixed prop="applyUserName" label="申请人" width="80">
                          </el-table-column>
                          <el-table-column fixed prop="applyTypeName" label="申请类型" width="80">
                          </el-table-column>
                          <el-table-column label="申请日期" width="180">
                              <template slot-scope="scope">
                                <span>{{scope.row.applyDate | formatTime}}</span>
                              </template>
                          </el-table-column>
                          <el-table-column prop="applyDepartmentName" label="申请部门" width="180">
                          </el-table-column>
                          <el-table-column prop="roomNum" label="房间号" width="120">
                          </el-table-column>
                          <el-table-column prop="mobile" label="手机号" width="120">
                          </el-table-column>
                          <el-table-column label="申请事物" align="center">
                              <template slot-scope="scope">
                                  <el-popover trigger="hover" placement="top">
                                  <p v-for="item in scope.row.thing" :key="item.index">{{ item }}</p>
                                  <div slot="reference" class="name-wrapper">
                                      <el-tag size="medium" :style="{textAlign: 'center'}">查看全部申领</el-tag>
                                  </div>
                                  </el-popover>
                              </template>
                          </el-table-column>
                          <el-table-column prop="status" label="流程状态" width="120" align="center">
                              <template slot-scope="scope">
                                <span v-if="scope.row.status == '1' " class="color-warning">正在审批中</span>
                                <span v-if="scope.row.status == '2' " class="color-danger">流程被拒绝</span>
                                <span v-if="scope.row.status == '3'" class="olor-info">流程已过期</span>
                                <span v-if="scope.row.status ==='0'" class="color-success">已通过流程</span>
                              </template>
                          </el-table-column>
                          <el-table-column fixed="right" label="操作" width="100">
                              <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row,scope.row.applyTypeId)" type="text" size="small">查看流程</el-button>
                              </template>
                          </el-table-column>
                      </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="我经手的流程" name="third">
                      <el-table stripe :data="tableData3" style="width: 100%">
                          <el-table-column fixed prop="applyUserName" label="申请人" width="80">
                          </el-table-column>
                          <el-table-column fixed prop="applyTypeName" label="申请类型" width="80">
                          </el-table-column>
                          <el-table-column label="申请日期" width="180">
                              <template slot-scope="scope">
                                <span>{{scope.row.applyDate | formatTime}}</span>
                              </template>
                          </el-table-column>
                          <el-table-column prop="applyDepartmentName" label="申请部门" width="120">
                          </el-table-column>
                          <el-table-column prop="roomNum" label="房间号" width="120">
                          </el-table-column>
                          <el-table-column prop="mobile" label="手机号" width="120">
                          </el-table-column>
                          <el-table-column label="申请事物" align="center">
                              <template slot-scope="scope">
                                  <el-popover trigger="hover" placement="top">
                                  <p v-for="item in scope.row.thing" :key="item.index">{{ item }}</p>
                                  <div slot="reference" class="name-wrapper">
                                      <el-tag size="medium" :style="{textAlign: 'center'}">查看全部申领</el-tag>
                                  </div>
                                  </el-popover>
                              </template>
                          </el-table-column>
                          <el-table-column prop="status" label="流程状态" width="120" align="center">
                              <template slot-scope="scope">
                                <span v-if="scope.row.status == '1' " class="color-warning">正在审批中</span>
                                <span v-if="scope.row.status == '2' " class="color-danger">流程被拒绝</span>
                                <span v-if="scope.row.status == '3'" class="olor-info">流程已过期</span>
                                <span v-if="scope.row.status ==='0'" class="color-success">已通过流程</span>
                              </template>
                          </el-table-column>
                          <el-table-column fixed="right" label="操作" width="100">
                              <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row,scope.row.applyTypeId)" type="text" size="small">查看流程</el-button>
                              </template>
                          </el-table-column>
                      </el-table>
                  </el-tab-pane>
              </el-tabs>
              <div class="page-wrap" ref="tablePage" v-if="pagesTotal>10">
                  <el-pagination background @current-change="currentChange" :current-page="currentPage" layout="total, prev, pager, next" :total="pagesTotal">
                  </el-pagination>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { SET_TIME_YYMMDDHHMM } from "@/utils/formatTime";
export default {
  name: "history",
  data() {
    return {
      pagesTotal: 0,
      currentPage: 1,

      activeName: "",
      assetsSort: {
        classify: "",
        date1: "",
        date2: "",
        state: "",
        group: "",
        secretLevel: "",
        otherInfo: ""
      },
      tableData1: "",
      tableData2: "",
      tableData3: ""
    };
  },
  methods: {
    tabClick(data) {
      this.activeName = data.name;
      this.getDataList(10, 1);
    },
    handleClick(row, applyTypeId) {
      console.log(row.flowId);
      this.$router.push({
        path: "/ProcessConsole/detail" + `?id=${row.flowId}&type=${applyTypeId}`
      });
    },
    getDataList(limit = 10, offset = 1) {
      let _this = this;
      var url = "";
      let val = _this.activeName;
      // 注释，根据val的不同，跳转到不同
      function getData(type) {
        if (type == "first") {
          request({
            url: url + `?limit=${limit}&offset=${offset}`,
            method: "get"
          }).then(res => {
            if (res.code === "000000") {
              _this.tableData1 = res.data.list;
              _this.pagesTotal = res.data.total;
              for (var i = 0; i < res.data.list.length; i++) {
                _this.tableData1[i].thing = res.data.list[i].applyThings.split(
                  ";"
                );
              }
            }
          });
        }
        if (type == "second") {
          request({
            url: url + `?limit=${limit}&offset=${offset}`,
            method: "get"
          }).then(res => {
            if (res.code === "000000") {
              _this.tableData2 = res.data.list;
              _this.pagesTotal = res.data.total;
              for (var i = 0; i < res.data.list.length; i++) {
                _this.tableData2[i].thing = res.data.list[i].applyThings.split(
                  ";"
                );
              }
            }
          });
        }
        if (type == "third") {
          request({
            url: url + `?limit=${limit}&offset=${offset}`,
            method: "get"
          }).then(res => {
            if (res.code === "000000") {
              _this.tableData3 = res.data.list;
              _this.pagesTotal = res.data.total;
              for (var i = 0; i < res.data.list.length; i++) {
                _this.tableData3[i].thing = res.data.list[i].applyThings.split(
                  ";"
                );
              }
            }
          });
        }
      }
      if (val == "first") {
        url = _this.$api.getWaitMeToDo;
        getData("first");
      }
      if (val == "second") {
        url = _this.$api.getMyStartFlow;
        getData("second");
      }
      if (val == "third") {
        url = _this.$api.getMyParticipant;
        getData("third");
      }
    },
    currentChange(page) {
      //...to do
      getDataList(10, page);
    }
  },

  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    document.body.className = "con-bg";
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    document.body.className = "";
    next();
  },
  mounted() {
    this.activeName = "first";
    this.getDataList(10, 1);
  },
  activated() {
    this.activeName = "first";
    this.getDataList(10, 1);
  },
  filters: {
    formatTime(time) {
      return SET_TIME_YYMMDDHHMM(time);
    }
  }
};
</script>

<style lang="less" scoped>
.process-list {
  padding-top: 120px;
  max-width: 1200px;
  margin: 0 auto;
}
</style>